<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="input-group">
                <button class="btn btn-warning" id="btnFormatterNginxConf">格式化</button>
                <div class="input-group-prepend">
                    <select class="custom-select" id="seindent">
                        <optgroup label="缩进">
                            <option value="    ">4格</option>
                            <option value="  ">2格</option>
                        </optgroup>
                    </select>
                </div>
                <div class="input-group-prepend">
                    <select class="custom-select" id="senewline">
                        <optgroup label="格式化选项">
                            <option value="1">大括号在行尾</option>
                            <option value="2">大括号在行首（新的一行）</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-2">
            <div id="ebox" class="border position-relative">
                <textarea class="form-control"></textarea>
                <i class="fa fa-arrows-alt fa-fw me-full-btn" title="Switch the full screen"></i>
            </div>
        </div>
    </div>
</div>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("codemirror,codemirror-nginx,nginxbeautifier"))

<script>
    var ebox = $('#ebox');

    var cme = CodeMirror.fromTextArea(ebox.children()[0], {
        mode: 'nginx',
        lineNumbers: true
    })
    cme.setValue(ss.lsStr("txt"));
    cme.on("change", function () {
        ss.ls.txt = cme.getValue();
        ss.lsSave();
    });

    $(window).on('load resize', function () {
        cme.setSize("100%", $(this).height() - ebox.offset().top - 15);
    }).click(function (e) {
        var target = e.target || window.event.srcElement;
        if (target.nodeName == "I" && target.className.indexOf('fa-arrows-alt') >= 0) {
            cme.setSize("100%", $(this).height() - ebox.offset().top - 15);
        }
    })

    $('#btnFormatterNginxConf').click(function () {
        var indent = $('#seindent').val();
        modifyOptions({ INDENTATION: indent });
        var cleanLines = clean_lines(cme.getValue());
        var newline = $('#senewline').val();
        if (newline == 1) {
            modifyOptions({ trailingBlankLines: false });
            cleanLines = join_opening_bracket(cleanLines);
        }
        cleanLines = perform_indentation(cleanLines, indent);
        cme.setValue(cleanLines.join("\n"));
    });
</script>